<template>
  <div class="Time-container">
      <label for="year">Peak a Year&nbsp;&nbsp;</label>
      <input type="text" name="year" id="year" ref="input" @keydown="changeTime" :value="year"/>
      <button @click="changeTime">切换时间</button>
  </div>   
</template>

<script>
import {error} from "@/utils/log.js"
export default {
    props: ["year"],
    methods: {
        changeTime(e) {
            if(e.key) {
                if(e.key !== "Enter")return ;
            }
            let newYear = this.$refs.input.value;
            if(newYear<1970) {
                error("我还没这么老吧！");   
                return ;
            }
            this.$emit("changeTime",newYear);
        }
    },
}
</script>

<style scoped lang="less">
    .Time-container {
        text-align: center;
        label {
            font-family: 'xingkai';
            font-size: 25px;
            font-weight: bold;
        }
        input[type="text"] {
            border: none;
            background: transparent;
            border-bottom: 1px solid black;
            // 去除选中时的边框
            font-size: 20px;
            outline: none;
            font-style: italic;
            font-weight: bold;
            width: 3em;
            text-align: center;
        }
        button {
            font-family: "kaiti";
            border: none;
            margin-left: 20px;
            background-color: rgba(9, 132, 227,.3);
            border-radius: 5px;
            width: 60px;
            height: 30px;
            cursor: pointer;
            color: white;
        }
    }
</style>